<template>
  <div>
    <div class="block">
      <span class="demonstration"></span>
      <el-cascader
        :disabled="isDisabledAll"
        v-model="levelOneCategoryIds"
        :options="levelOneOptions"
        @change="handleChangeOne"></el-cascader>
    </div>
    <div class="block">
      <span class="demonstration"></span>
      <el-cascader
        :disabled="levelOneCategoryIds.length === 0 || isDisabledAll"
        v-model="levelTowCategoryIds"
        :options="levelTowOptions"
        :props="{ expandTrigger: 'hover' }"
        @change="handleChangeTow"></el-cascader>
    </div>
    <div class="block">
      <span class="demonstration"></span>
      <el-cascader
        :disabled="levelTowCategoryIds.length === 0 || isDisabledAll"
        v-model="levelThreeCategoryIds"
        :options="levelThreeOptions"
        :props="{ expandTrigger: 'hover' }"
        @change="handleChangeThree"></el-cascader>
    </div>
  </div>
</template>

<script>
import {getCategoryIdsByCategory3, getCategoryList} from "@/api/prod/prod";

export default {
  name: "category-cascader",
  props: {
      sourceCategoryId: {
        type: Number,
        default: null
      },
      isDisabledAll: {
        type: Boolean,
        default: false
      }
    },
  data() {
    return {
      levelOneCategoryIds: [],
      levelOneOptions: [],
      levelTowCategoryIds: [],
      levelTowOptions: [],
      levelThreeCategoryIds: [],
      levelThreeOptions: [],
      //查询数据
      queryData: {
        pageNum: 1,
        pageSize: 100,
        status: 1,
        parentId: 0
      },
      isFirstInit: true, //是否第一次初始化时
    };
  },
  created() {
    this.getCategoryList(1,0)
  },
  methods: {
    getCategoryList(level, parentId, defaultIds) {
      this.queryData.parentId = parentId;
      getCategoryList(this.queryData).then(response => {
        let options = response.data.map(item => {
          return {
            value: item.id,
            label: item.name
          }
        })

        //不用回显类目时
        if (!defaultIds){

          if (level === 1){
            this.levelOneOptions = options;
            this.levelOneCategoryIds = []

            this.levelTowOptions = [];
            this.levelTowCategoryIds = []

            this.levelThreeOptions = [];
            this.levelThreeCategoryIds = []
          }else if (level === 2){
            this.levelTowOptions = options;
            this.levelTowCategoryIds = []

            this.levelThreeOptions = [];
            this.levelThreeCategoryIds = []
          }else {
            this.levelThreeOptions = options;
            this.levelThreeCategoryIds = []
          }

        }else {
          //编辑商品回显类目时
          if (level === 1){
            this.levelOneOptions = options;
            this.levelOneCategoryIds = defaultIds[0]
          }else if (level === 2){
            this.levelTowOptions = options;
            this.levelTowCategoryIds = defaultIds[1]
          }else {
            this.levelThreeOptions = options;
            this.levelThreeCategoryIds = defaultIds[2]
          }

        }
      })
    },
    handleChangeOne(levelOneCategoryIds) {
      let levelOneCategoryId = levelOneCategoryIds[0]
      this.getCategoryList(2, levelOneCategoryId);
      this.$emit('update:sourceCategoryId', 0);
      this.$emit('selected', 1, levelOneCategoryId);
    },
    handleChangeTow(levelTowCategoryIds) {
      let levelTowCategoryId = levelTowCategoryIds[0]
      this.getCategoryList(3, levelTowCategoryId);
      this.$emit('update:sourceCategoryId', 0);
      this.$emit('selected', 2, levelTowCategoryId);
    },
    handleChangeThree(levelThreeCategoryIds) {
      let levelThreeCategoryId = levelThreeCategoryIds[0];
      this.$emit('update:sourceCategoryId', levelThreeCategoryId);
      this.$emit('selected', 3, levelThreeCategoryId);
    }
  },
  watch: {
    sourceCategoryId(val, oldVal) {
      if (val == null){
        this.levelOneCategoryIds = [];
        this.levelTowCategoryIds = [];
        this.levelThreeCategoryIds = [];
        return;
      }

      this.levelThreeCategoryIds[0] = val;

      //是否首次
      if (this.isFirstInit){

        //是编辑的情况
        this.$nextTick(() =>{
          this.isFirstInit = false;

          //在编辑商品时, 才有 categoryId3
          let categoryId3 = this.levelThreeCategoryIds[0];
          if (categoryId3){
            //根据三级类目id, 反向获取到 二级, 一级类目的id数组;
            getCategoryIdsByCategory3(categoryId3).then(response => {
              let defaultIds = response.data;

              //初始化一级类目选项
              let categoryId1 = defaultIds[0];
              let categoryId2 = defaultIds[1];
              // let categoryId3 = defaultIds[2];

              //初始化一级类目选项
              this.getCategoryList(1, 0, defaultIds)

              //初始化二级类目选项
              this.getCategoryList(2, categoryId1, defaultIds)

              //初始化三级类目选项
              this.getCategoryList(3, categoryId2, defaultIds)

            });
          }
        })
      }

    }
  },
}
</script>

<style scoped>
.block {
  display: inline-block;
  margin-left: 2px;
}
/*.el-input__inner {*/
/*  margin-left: 5px;*/
/*}*/
</style>
